<template>
  <div class="origin_item" :ref="dragNode" role="Box" data-testid="box">
    <span>{{ props.label }}</span>
  </div>
</template>
<script setup>
import { useDrag } from 'vue3-dnd'
const props = defineProps({
  label: String,
  type: String,
  order: Number,
});
const [collect, dragNode] = useDrag(() => {
    const { type } = props || {}
    return {
        type,
        item: props
    }
})
</script>
<style lang="less" scoped>
.origin_item {
  width: 100%;
  height: 78px;
  line-height: 78px;
  margin-bottom: 35px;
  border-radius: 20px;
  opacity: 1;
  background: #bf8a04;
  box-shadow: 0px -5px 0px 0px #4f3b09;
  font-family: FZLanTingYuanS-R-GB;
  font-size: 40px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.09em;
  font-variation-settings: "opsz" auto;
  color: #ffffff;
  &:last-child {
    margin-bottom: 0px;
  }
}
</style>
